<template>
    <div id="home">
        <h1>博客总览</h1>
        <input type="text" placeholder="搜索博客" v-model="search" />
        <div v-for="dataList in filterBlogs" class="single-blog">
            <router-link :to="`/blog/${dataList.objectId}`">
                <h2 class="title">{{dataList.title}}</h2>
                <article class="content">{{dataList.content}}</article>
                <p>作者：{{dataList.author}}</p>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                dataLists: [],
                search: ""
            }
        },
        computed: {
            filterBlogs() {
                //  match(需要匹配的字符串)如果匹配到则返回值，否则返回null。注意：如果匹配的字符串是空字符串那么也会返回值
                return this.dataLists.filter(item => item.title.match(this.search));
            }
        },
        created() {
            const query = Bmob.Query("Blog");
            query.find().then(response => this.dataLists = response);
        }
    }
</script>

<style scoped>
    #home {max-width: 800px;margin: 0 auto;}
    input[type="text"] {padding: 8px;width: 100%;box-sizing: border-box;margin-top: 5px;}
    a {color: #444;text-decoration: none;padding: 20px;display: block;}
    .single-blog {margin: 20px 0;box-sizing: border-box;background-color: #eee;border: 1px dotted #aaa;}
    .title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .content {padding: 10px 0 0 10px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}
    p {font-size: 12px;color: #333;text-align: right;}
</style>